{:.no_toc}

UI 设计

主界面设计(version1)

预览

界面元素

• 主界面包括导航栏，登录按钮和问卷，小任务系统按钮
• 导航栏包括主界面导航，问卷系统导航，和社区导航
• 登录按钮跳转到登录哦或是注册界面
• 问卷按钮跳转到问卷系统，小任务系统跳转到任务系统

  交互关系

• 主要设置了多个跳转，主界面的作用总体就是一个导航栏，跳转到我们功能部分
• 在鼠标移动到图标上的时候，图标并不会因为鼠标悬停或者是其他的动作而有所改变，因此用户在使用的时候并没有明显的提示表面哪个控件可以点击
• 在界面跳转之间没有做动画，如果出现因为时间过长导致跳转缓慢的情况，就容易给用户带来不好的体验

视觉效果

• 控件没有明显的视觉提示，使用的时候要用户自己尝试哪些地方可以跳转
• 问卷系统和小任务系统的控件太过于简单，虽然简单的设计让人舒适，但是元素过于少，会让用户对该界面没有任何审美体验
• 留白太多，应该用更多的元素填充来传达视觉信息

总评

第一版的界面设计其实主要功能是表达清楚我们的产品逻辑，因此并没有花心思去修饰，仅仅是将要做的功能表达了出来。一开始的想法是界面从简，但是过度的缺乏元素反而非常的单调而没有审美趣味，因此有很大的改进空间

主界面设计(version2)

预览

界面元素

• 保留了之前的上方导航栏，同时在登录旁边增加了注册的按钮
• 在主界面增加了用于表达我们主题的图片，美观而清晰
• 将问卷系统，小任务系统的跳转按钮放在了图片中间，而且缩小其大小，看上去主题明确
• 元素明确清晰，数量少，而且也美观

  交互关系

• 主要设置了多个跳转，主界面的作用总体就是一个导航栏，跳转到我们功能部分
• 在鼠标移动到图标上的时候，图标会发生变化，比如悬停在上方导航栏的时候，挣闲钱，问卷系统，小任务系统，社区系统，这几个都会有变化，告诉用户这里可以点击
• 点击控件会有动画，明确告诉用户其操作是有效的
• 之所以设计多个地方都可以跳转到问卷系统，目的是让用户操作起来更简单，在我们所有的界面上面，都有这样一个导航栏，这样用户在使用我们的软件的时候就不会迷失方向，随时随地跳转到自己想去的地方

视觉效果

• 控件有明显的视觉提示，使用的时候就很清晰的知道什么地方可以做什么
• 暗色调的底部图片很好的和我们的主题“不只是问卷调查”形成鲜明的对比，上方问卷系统，小任务系统，社区系统控件用白色字也很好的突显，用户找起来不麻烦，挣闲钱三个大字用浅蓝色，突出主题的同时也契合背景，问卷调查和小任务系统用浅色调，弥补整个图片只有深色调的空白，显得不那么单调。
• 留有空白，同时该有的都有，设计简约而美观

问卷系统界面

预览

界面元素

• 问卷系统界面包括上方导航栏，中间跑马灯广告，下方功能跳转区域
• 导航栏包括主界面导航，问卷系统导航，和社区导航
• 登录按钮跳转到登录或是注册界面
• 下方的跳转区块跳转到我们问卷系统的主体

视觉效果

• 控件色调以浅色系为主，不会给用户带来审美疲劳
• 下方的跳转区域简单明确，麻雀虽小五脏俱全
• 有留白，看起来舒适

小任务界面

预览

界面元素

• 小任务系统界面包括上方导航栏，中间跑马灯广告，下方功能跳转区域
• 导航栏包括主界面导航，问卷系统导航，和社区导航
• 登录按钮跳转到登录或是注册界面
• 下方的跳转区块跳转到我们小任务系统的主体

视觉效果

• 控件色调以深色浅色搭配，对比明确美观而清晰
• 下方的跳转区域简单明确，这只是我们的初稿，在成品时该部分还会加上装饰
• 有留白，看起来舒适

总评

可以看到我们在主界面下还加了其他内容（用侧滑栏划下就可看到）这部分是对我们功能的简单介绍，同时配有直观的图片表述主题，在下方还有跳转按钮，可以说增加的这个部分让我们的主界面更加的丰富，用户使用我们产品的第一感受就能了解到我们能做什么，我们具有什么样的特点

界面依旧保持我们原来的简约的想法，同时我们增加了很多的视觉元素，这让我们的界面看上去简单而美观，可以说是一次全方位的优化，如果说还有不足，那么我觉得就是字体上面，控件的交互方面可以做得更好，比如说问卷系统，小任务系统和社区系统可以增加一个很浅的有立体感小边框，这样看上去交互性就更强，我们字体可以设置渐变，这样让我们的界面看上去更加生动而不会像现在这样呆板。